<template>
  <div>
    <button v-why v-if="counter < 2" @click="counter++">jishu</button>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  directives: {
    why: {
      created() {
        console.log("created");
      },
      beforeMount() {
        console.log("beforeMount");
      },
      mounted() {
        console.log("mounted");
      },
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      updated() {
        console.log("update");
      },
      beforeUnmount() {
        console.log("beforeUnmount");
      },
      unmounted() {
        console.log("unmounted");
      },
    },
  },
  setup() {
    const counter = ref(0);

    return {
      counter,
    };
  },
};
</script>

<style scoped></style>
